<template>
  <div class="wrapper">
    <div class="header">
      <mt-header title="指数交易">
        <router-link to="/list" slot="left">
          <mt-button icon="back">行情</mt-button>
        </router-link>
      </mt-header>
    </div>
    <div class="detail-part">
      <div class="index-name">
        <p>{{detail.indexName}} <span>{{detail.indexCode}}</span></p>
      </div>
      <div class="clearfix">
        <div class="pull-left col-xs-4">
          <p :class="detail.floatPoint>0?'price red':detail.floatPoint<0?'green price':'price'">
            {{Number(detail.currentPoint).toFixed(2)}}</p>
          <p :class="detail.floatPoint>0?'gain red':detail.floatPoint<0?'green gain':'gain'">
            <span>{{Number(detail.floatPoint).toFixed(2)}}</span>
            <span>{{Number(detail.floatRate).toFixed(2)}}%</span>
          </p>
        </div>
        <div class="pull-right col-xs-8">
          <ul class="price-detail text-center">
            <li>
              <!-- <p class="title"></p> -->
              <p :class="detail.floatPoint<0?'number green':'number red'">
                <span class="title">涨跌</span>
                {{Number(detail.floatPoint).toFixed(2)}}
              </p>
            </li>
            <li>
              <p class="number red">
                <span class="title red">涨停限制</span>
                {{(Number(detail.currentPoint) * settingInfo.riseLimit + Number(detail.currentPoint)).toFixed(2)}}
              </p>
            </li>
            <li>
              <p :class="detail.floatRate<0?'number green':'number red'">
                <span class="title">涨幅</span>
                {{Number(detail.floatRate).toFixed(2)}}%
              </p>
            </li>
            <li>
              <!-- <p class="title">最低</p> -->
              <p class="green">
                <span class="title green">跌停限制</span>
                {{(detail.currentPoint - Number(detail.currentPoint) * settingInfo.downLimit ).toFixed(2)}}
              </p>
            </li>
          </ul>
        </div>
      </div>
      <!-- <div class="clearfix">
          <div class="col-xs-4 red">涨停限制 </div>
          <div class="col-xs-4 green">跌停限制 </div>
      </div> -->
    </div>
    <div v-if="false" class="box-tab">
      <div class="tab-title">
        <span class="circle"></span>股票详情
      </div>
      <div class="tab-con">
        <ul class="first clearfix">
          <li class="pull-left">
            {{detail.indexName}}
          </li>
          <li :class="detail.floatPoint < 0?'pull-left green':detail.floatPoint == 0?'pull-left':'pull-left red'">
            当前价：
            <span>{{Number(detail.currentPoint).toFixed(2)}}</span>
          </li>
        </ul>
        <ul class="first clearfix">
          <li class="pull-left">
            {{detail.indexCode}}
            <!-- <span>(Scrb1905)</span> -->
          </li>
          <li :class="detail.floatRate < 0?'pull-left green':detail.floatRate == 0?'pull-left':'pull-left red'">
            <!-- 当前价： -->
            <span>{{detail.floatRate}}%</span>
          </li>
        </ul>
        <!-- <div class='buy-price clearfix'>
            <div class="col-xs-4">
                <p>市价买入</p>
            </div>
            <div class="col-xs-4">
                <p class="red">{{detail.nowPrice}}</p>
            </div>
            <div class="col-xs-4">
                <p>说明</p>
            </div>
        </div> -->
      </div>
    </div>
    <div class="box-tab">
      <div class="tab-title">
        <span class="circle"></span>选择手数
      </div>
      <div class="tab-con">
        <ul class="radio-group clearfix">
          <li v-for="item in numberList" :key="item.key" @click="selectNumberFun(item.value)">
            <div :class="selectNumber == item.value?'on':''">
              {{item.label}}
            </div>
          </li>
          <li class="auto" v-show="!selectNumber">
            <input @keyup="changeAutoNumber" v-model="autoNumber" type="text">手
          </li>
        </ul>
        <p class="clearfix">
          <span class="pull-left">最小购买股数{{Number(detail.minNum)}}手</span>
          <span class="protem pull-right">最大可购买数量{{Number(detail.maxNum)}}手</span>
        </p>
      </div>
    </div>
    <div class="box-tab">
      <div class="tab-title">
        <span class="circle"></span>买卖方向
      </div>
      <div class="tab-con">
        <ul class="radio-group clearfix">
          <li v-for="item in type" :key="item.key" @click="selectTypeFun(item.value)">
            <div :class="selectType == item.value?'on':''">
              {{item.label}}
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div v-show="false" class="box-tab">
      <div class="tab-title">
        <span class="circle"></span>杠杆倍数
      </div>
      <div class="tab-con">
        <ul class="radio-group clearfix">
          <li v-for="item in cycle" :key="item.key" @click="selectCycleFun(item.value)">
            <div :class="selectCycle == item.value?'on':''">
              {{item.label}}
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="box-tab">
      <div class="tab-con">
        <!-- <p class="text-left page-part">
            <span class="">{{selectNumber?selectNumber*100:autoNumber*100}}股</span>
            <span class="pull-right">买入金额:{{price?price:0}}元</span>
        </p> -->
        <p class="clearfix">
          <!-- <span class="pull-right">最小购买金额{{settingInfo.buyMinAmt}}元</span> -->
          <span class="pull-right">最大购买金额:{{settingInfo.buyMaxPercent * $store.state.userInfo.enableIndexAmt}}</span>
        </p>

      </div>
    </div>
    <div class="agree text-center">
      <p style="line-height: 0.4rem;padding: 0 0.2rem;">
        当该指数涨幅达到<span class="red">涨停限制</span>时,不能买涨；达到<span class="green">跌停限制</span>时，不能买跌.
      </p>
      <!-- <p>
          <i @click="isAgree" :class="agree?'glyphicon glyphicon glyphicon-ok-sign red':'glyphicon glyphicon-ok-circle'"></i>
          我已阅读并同意
          <a @click="totrageUrl" >《指数交易交易⻛险揭示书》</a>
      </p> -->
    </div>
    <div class="footer-btn">
      <div class="total">
        <p class="pay">支付保证金<span class="protem">{{total?total:0}}</span></p>
        <p class="account">(账户余额:{{$store.state.userInfo.enableIndexAmt}}元)</p>
      </div>
      <mt-button :disabled="buying" class="btn-red" size="small" type="danger" @click="toInquiry">下单</mt-button>
    </div>
    <mt-popup v-model="dialogShow" class="mint-popup-box mint-popup-white">
      <div class="check-box">
        <div class="risk_text">
          <h3 class="text-center">合作协议</h3>
          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;融资融券服务协议（以下简称“本协议”）是平台运营方（以下简称“本公司”）与融资融券用户（包含融资人和投资人，以下简称“用户”）就融资融券服务相关事项订立的有效合约。
            本协议由协议正文以及本公司通过平台已经发布的或将来可能发布的各类规则和文件的各项规定组成，如融资融券发布的规则和文件与协议正文有冲突，以公布生效日期或签署日期在后的规则或文件为
            准执行。用户通过网络页面点击确认接受本协议，即表示用户与本公司已达成合意并同意接受本协议项下的全部约定内容。
            在接受本协议之前，用户务必仔细阅读本协议的全部内容（特别是以粗体下划线标注的内容）。如果用户不同意本协议的任意内容，或者无法准确理解该条款的含
            义，请不要进行后续操作。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一、定义
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本协议中，除非上下文另有解释，下列词语具有如下含义：
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1、交易平台：指融资融券信息中介平台 本公司根据业务需要不时修改的网址。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2、融资融券：指融资融券信息平台，面向融资融券用户提供包括但
            不限于沪深所A股、交易合作信息发布、交易合作撮合、交易指令通讯、交易风控管理、交易清结算、资金支付（由支付机构提供）等服务的线上中介服务平台。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3、融资人：指通过融资融券注册成为融资人的用户，作为投资人的交易合作方，负责向投资人提供交易策略的自然人。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4、投资人：投资人：指通过融资融券注册成为投资人的用户，作为融资人的交易合作方，负责按融资人交易策略并利用自有资金和账户进行交易的自然人或法人。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5、支付机构：指融资融券委托的为融资融券用户提供资金划转、查询、结算等支付服务的非金融支付机构。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;二、融资融券服务
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;融资融券为用户提供以下服务：
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1、交易合作撮合服务
            融资融券作为融资人和投资人的中间方，对融资人的交易谋略和投资人的交易需求进行匹配，撮合双方建立一对一的交易合作关系。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2、交易指令通讯服务
            融资融券为融资人和投资人交易合作过程中提供向对方发送／接收交易指令通讯服务，交易指令包括：策略指令和点卖指令。融资融券交易指令通讯速度从融资人发出交易指令被融资融券确认时点至投资人接收到交易指令时点，两时点时间间隔原则不超过60秒。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3、交易风控管理服务
            为最大程度确保融资人与投资人交易合作正常进行，保障双方利益，融资融券将：
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1）对存在退市、停牌等风险的交易品种，以风险警示形式（包括但不限于《策略风险警示股名单》、《递延风险警示股名单》等）实时发布
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2）对于高风险交易品种要求融资人完成指定时长或指定数量的模拟交易后，方具备参与该交易品种交易合作资格。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3）根据融资人交易策略历史业绩，调整融资人参与交易合作的额度。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4）根据投资人与融资人交易数据和市场系统性风险分析，调整产品范围及具体方案等。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4、交易清结算服务
            融资融券根据融资人和投资人签署的《交易合作协议》相关约定，为双方提供交易清结算服务。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5、资金支付服务
            融资人与投资人交易合作过程发生的涉及交易款项的支付和结算都将由融资融券委托连连支付处理。双方应保证融资融券账户状态正常，并确保账户中有足额的资金以便正常划转。因一方账户状态异常导致交易无法实现的，所有损失由融资融券自行承担。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6、用户交易合作协议生成与保管
            融资融券为融资人和投资人生成交易合作协议供双方查询、存档。融资融券会对融资人和投资人在融资融券发生的交易信息及生成的协议保存三年。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;7、服务费及收费标准
            融资融券向融资人和投资人收取一定的费用，具体收费事项及资费标准由融资融券另行与用户约定或者通过融资融券进行展示。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三、声明与承诺
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1、用户除需要遵守本协议约定外，还应遵守履行本协议有关的附件。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2、用户保证除协议另有约定外，对于其交易合作达成后不得变更、撤销或撤回。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3、用户保证不会利用融资融券进行非法证券交易、资金非法转移、套现及洗钱等违法犯罪活动；
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4、用户保证其所参与交易合作的资金来源合法，是该资金的
            合法所有人，完全有权使用该资金进行交易；如第三人对资金归属、合法性问题发生争议，由用户负责解决，与融资融券无关，并保证及时赔偿交易合作方因此所遭受
            的一切损失
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5、用户变更账户信息、通讯地址、电话等相关重要信息，须及时书面或其他融资融券同意的方式通知融资融券；因用户未及时通知而导致其自身在本协议项下各项权益受到损失的，
            由用户自行承担全部责任。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6、用户同意融资融券有权限制用户参与交易合作的品种和额度。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;7、用户知晓且同意融资融券享有用户合作交易信息的所有权和使用权。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;8、用户知晓且同意融资融券仅向用户提供交易信息与服务，策
            中策既不是融资人与投资人之间交易合作关系的当事人，也不是该合作关系中融资人与投资人的保证人或连带责任人
            ；融资融券根据本协议约定向融资人和投资人提供的所有服务仅供融资人和投资人决定是否进行交易合作时予以参考，无论融资人和投资人形成的交易合作关系是否存
            在第三方担保，在任何情况下均不应视为融资融券及其关联方对融资人的交易策略能力及相关交易协议的履行做出了任何明示或默示的担保，亦不应视为融资融券及其关
            联方对投资人的本金和收益做出了明示或默示的担保或保证。融资人和投资人应自行判断相关信息的真实性、准确性、及时性，自主决定是否进行交易合作，并承担
            由此而导致的一切损失或责任。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;9、用户在交易合作过程产生的相关税费，由用户自行向其主管税务机关申报、缴纳，融资融券不负责相关事宜处理。
            四、风险提示
            用户知晓并同意，通过融资融券进行交易合作可能面临如下风险，且除以下揭示的风险外还有其他的外部风险，均需要用户自行承担，融资融券不承担任何责任：
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1、政策监管风险：因宏观政策、监管导向、行业政策、地区发展政策等因素引起的无法实现交易合作的风险。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2、违约风险：因交易合作方没有按时履约引起损失的风险。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3、因不可抗力因素导致的风险，不可抗力因素包括但不限于
            以下情形：融资融券系统停机维护；融资融券所依赖的通讯设备出现故障不能进行数据传输；因台风、地震、海啸、洪水
            、停电、战争、恐怖袭击等不可抗力之因素，造成融资融券系统障碍不能执行业务的；由于黑客攻击、电信部门技术调整或故障、网站升级、其他第三方的问题等原因
            而造成的服务中断或者延迟。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;五、通知
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;除本协议另有约定外，本协议履行过程中的通知应以中文书面
            形式写成。融资融券向用户发出的书面通知方式包括但不限于邮寄纸质通知、网站公告、电子邮件、站内信、手机短信
            和传真等方式。如以邮寄方式发出书面通知的，则在融资融券按照用户在注册融资融券时留存的通讯地址交邮后的第三个自然日即视为送达。如以网站公告、电子邮件、
            手机短信和传真等电子方式发出书面通知的，则在通知发送成功即视为送达。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;六、协议的变更、解除
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;融资融券有权随时单方面修改本协议中与用户之间相关的权利义
            务，并根据本协议约定的方式通知用户，若用户不同意修改本协议，则应当立即停止使用融资融券服务；否则，视为同
            意并接受修改后的协议。修订的协议一经通知，立即生效。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;七、协议终止
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;若出现任何一种以下情况，融资融券有权单方面解除本协议且不视为融资融券违约：
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1、用户自行注销融资融券账户；
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2、用户冒用他人名义、盗用他人账户使用融资融券服务的；
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3、用户为非法目的使用融资融券服务的；
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4、用户从事任何可能侵害融资融券系统、资料的行为；
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5、用户从事任何损害融资融券名誉的行为；
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6、用户违反任何法律法规、本协议约定的；
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;7、用户故意利用融资融券系统漏洞进行非正常交易合作的；
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;8、监管机构认为融资融券提供的服务不再符合相关监管规定的；
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;因上述第1—7款原因导致本协议终止的，所导致的全部责任由用户自行承担。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;八、争议的解决
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本协议的订立、效力、解释、履行及争议的解决均适用中华人
            民共和国法律。在协议履行期间，凡由本协议引起的或与本协议有关的一切争议、纠纷，当事人应首先协商解决。协商不成，各方一致同意提交仲裁委员会仲裁。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;九、其他
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1、本协议标题仅为查阅方便而设置，不应构成对本协议的任何解释，不对标题之下的内容及范围作任何限定。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2、本协议的附件及各项补充、修订或变更，为本协议不可分割的组成部分，与本协议正文具有同等法律效力。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3、用户通过网络页面点击确认后本协议即生效。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4、用户在审阅完毕本协议文本时，已阅读并自愿做出以下承诺：“本用户已经阅读本协议所有条款，充分了解并清楚知晓相应的权利义务，并愿意承担相关风险。”
          </p>
          <!-- <p style="text-align: right;">
              投资人与融资人交易合作协议<br/>
              融资融券策略交易居间服务协议
          </p> -->
        </div>
      </div>
      <div class="box-btn">
        <mt-button class="btn-red" size="small" type="danger" @click="dialogShow = false">确认</mt-button>
      </div>
    </mt-popup>
    <foot></foot>
  </div>
</template>

<script>
import foot from '../../components/foot/foot'
import { Toast } from 'mint-ui'
import { isNull } from '@/utils/utils'
import * as api from '@/axios/api'

export default {
  components: {
    foot
  },
  props: {},
  data () {
    return {
      detail: {
        currentPoint: '2852.9948',
        depositAmt: 10000,
        eachPoint: 300,
        floatPoint: '0.4795',
        floatRate: '0.02',
        id: 1,
        indexCode: '000001',
        indexGid: 'sh000001',
        indexName: '上证指数',
        listShow: 1,
        maxNum: 100,
        minNum: 1,
        transFee: 200,
        transState: 0
      }, //
      cycle: [ // 杠杆倍数
        { label: '10', value: '10' },
        { label: '20', value: '20' },
        { label: '30', value: '30' }
      ],
      selectCycle: '20',
      numberList: [
        { label: '1手', value: '1' },
        { label: '20手', value: '20' },
        { label: '30手', value: '30' },
        { label: '50手', value: '50' },
        { label: '80手', value: '80' },
        { label: '100手', value: '100' },
        { label: '自定义', value: '' }
      ],
      selectNumber: '',
      autoNumber: '',
      type: [
        { label: '买涨', value: '0' },
        { label: '买跌', value: '1' }
      ],
      selectType: '',
      // number:0,// 股
      // price:0,// 股价格
      // total:0, // 总价
      agree: true,
      settingInfo: {
        buyMaxNum: 1000, // 最大买入股数
        buyMinNum: 100 // 最小买入股数
      }, // 设置规则信息
      dialogShow: false,
      timer: null,
      buying: false // 点击下单
    }
  },
  watch: {},
  computed: {
    total () {
      if (this.autoNumber) {
        return (this.detail.depositAmt * this.autoNumber).toFixed(2)
      } else if (this.selectNumber) {
        return (this.detail.depositAmt * this.selectNumber).toFixed(2)
      } else {
        return 0
      }
      // 需支付总价 = 每手保证金 * 股（1手 = 100股）
    },
    price () {
      if (this.autoNumber) {
        return (this.detail.eachPoint * this.autoNumber * 100).toFixed(2)
      } else if (this.selectNumber) {
        return (this.detail.eachPoint * this.selectNumber * 100).toFixed(2)
      } else {
        return 0
      }
      // 买入金额 = 每股价格 * 股（1手 = 100股）
    }
  },
  created () {
    // this.timer = setInterval(this.getDetail, 5000)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  mounted () {
    // this.getDetail()
    this.selectNumber = 0
    this.getSettingInfo()
    if (!this.$store.state.userInfo.enableAmt) {
      this.getUserInfo()
    }
    this.detail = this.$route.query.info
  },
  methods: {
    changeAutoNumber () {
      // 自定义手数
      this.selectNumber = ''
    },
    async getSettingInfo () {
      // 网站设置信息 指数
      let data = await api.getIndexSetting()
      if (data.status === 0) {
        // 成功
        this.settingInfo = data.data
        // 杠杆倍数
        this.selectCycle = data.data.siteLever
      } else {
        Toast(data.msg)
      }
    },
    isAgree () {
      let i = false
      let j = true
      this.agree = this.agree ? i : j
    },
    totrageUrl () {
      this.$router.push('/trade')
    },
    async getDetail () {
      let opts = {
        indexCode: this.$route.query.info ? this.$route.query.info.indexGid : ''
      }
      let data = await api.getSingleIndex(opts)
      if (data.status === 0) {
        this.detail = data.data
      } else {
        Toast(data.msg)
      }
    },
    selectCycleFun (value) {
      this.selectCycle = value
    },
    selectNumberFun (value) {
      this.selectNumber = value
      if (value !== 0) {
        this.autoNumber = ''
      }
    },
    selectTypeFun (value) {
      this.selectType = value
    },
    canBuyStatus () {
      let dataTime = new Date()
      let day = dataTime.getDay() // 星期几
      let hour = dataTime.getHours() // 小时
      let minute = dataTime.getMinutes() // 分钟
      if (day === 6 || day === 7) {
        return false
      }
      if (hour < 9 || (hour >= 12 && hour < 13) || hour >= 15) {
        return false
      }
      if (hour === 9 && minute < 32) {
        return false
      }
      if (hour === 11 && minute >= 30) {
        return false
      }
      if (hour === 14 && minute > 57) {
        return false
      }
      return true
    },
    async toInquiry () {
      // 判断在不在开盘时间内
      // if(!this.canBuyStatus()){
      //     Toast('不在交易时段内！')
      //     return
      // }
      // 下单

      if (!this.$store.state.userInfo.idCard) {
        Toast('您还未实名认证,请先实名认证了再下单')
        this.$router.push('/authentication')
        return
      }
      if (!this.agree) {
        Toast('需同意合作协议才能交易!')
      } else if (isNull(this.selectNumber) && isNull(this.autoNumber)) {
        Toast('请选择购买手数')
      } else if (isNull(this.selectType)) {
        Toast('请选择买卖方向')
      } else {
        this.buying = true
        let opts = {
          indexId: this.detail.id,
          buyNum: this.selectNumber ? this.selectNumber : this.autoNumber, // 单位为手
          buyType: this.selectType
          // lever:this.selectCycle,
        }
        let data = await api.indexBuy(opts)
        this.buying = false
        if (data.status === 0) {
          Toast(data.data)
          this.getUserInfo()
          this.$router.push('/orderlist?index=2')
        } else {
          Toast(data.msg)
        }
      }
    },
    toDetail () {
      this.$router.push('/listdetail')
    },
    goBack () {
      this.$router.go(-1)
    },
    async getUserInfo () {
      // 获取用户信息
      let data = await api.getUserInfo()
      if (data.status === 0) {
        // Toast(data.msg)
        this.$store.state.userInfo = data.data
      } else {
        Toast(data.msg)
      }
    }
  }
}
</script>
<style lang="less" scoped>
  body {
    background: #fff;
  }

  .protem {
    color: #ff8000;
  }

  .agree {
    margin-top: 0.2rem;
    padding-bottom: 1rem;

    a {
      color: #428bca;
    }
  }

  .footer-btn {
    position: fixed;
    z-index: 1;
    width: 100%;
    padding-right: 0;
    bottom: 0.97rem;
    height: .89rem;
    line-height: .89rem;
    display: flex;

    .total {
      font-size: 0.26rem;
      padding-left: 0.3rem;
      flex: 3;

      .pay {
        line-height: 0.45rem;
      }

      .account {
        line-height: 0.3rem;
        font-size: 0.24rem;
        color: #999;
      }
    }

    .btn-red {
      flex: 2;
      border-radius: 0;
      padding: 0;
    }
  }

  .auto {
    input {
      display: inline-block;
      width: 75%;
      border-bottom: 0.01rem solid #ddd;
    }
  }

  // bottom 7rem -> 0.97rem
  .buy-price {
    // border-top: 0.01rem solid #000000;
    padding-top: 0.15rem;

    p {
      height: 0.32rem;
      line-height: 0.32rem;
    }
  }

  .mint-popup-white {
    height: 6.5rem;
    padding: 0.25rem;

    .check-box {
      height: 5.3rem;
      line-height: 0.35rem;
      overflow: auto;

      h3 {
        margin-bottom: 0.2rem;
      }
    }

    .box-btn {
      width: 100%;
      padding-top: 0.2rem;

      .btn-red {
        width: 100%;
        height: 0.6rem;
      }
    }
  }

  .detail-part {
    .index-name {
      font-size: 0.3rem;
      padding: 0.2rem 0.3rem;

      span {
        font-size: 0.22rem;
        color: #999;
        margin-left: 0.2rem;
      }
    }

    .price {
      font-size: 0.5rem;
      padding-bottom: 0.1rem;
    }

    .gain {
      font-size: 0.24rem;
    }

    .title {
      color: #999;
      line-height: 0.36rem;
      padding-right: 0.1rem;

      &.red {
        color: #b60c0d;
      }

      &.green {
        color: #31b97e;
      }
    }

    .number {
      line-height: 0.36rem;
    }

    .price-detail {
      li {
        width: 60%;
        float: left;
        margin-bottom: 0.16rem;
        text-align: right;

        &:nth-child(odd) {
          width: 40%;
          text-align: left;
        }
      }
    }

    .detail-list {
      padding-left: 0.3rem;
    }
  }
</style>
